import React, { useEffect, useState } from 'react';
import { NavBar, Image, Tag, Button, Loading, Empty } from 'react-vant';
import { useNavigate, useParams } from 'react-router-dom';
import axios from '../../request/axios';
import './detail.less'; 


interface DoctorDetail {
  doctorId: number;
  doctorName: string;
  imagePic: string;
  jobTitle: string;
  inauguralHospital: string;
  departmentName: string;
  speciality: string;
  introduction: string;
  praise: number;
  serverNum: number;
  servicePrice: number;
  praiseNum: number;
  badNum: number;
}
 

const DoctorDetail: React.FC = () => {
  const navigate = useNavigate();
  const { doctorId } = useParams<{ doctorId: string }>();
  const [loading, setLoading] = useState(true);
  const [doctor, setDoctor] = useState<DoctorDetail | null>(null);
  const [error, setError] = useState<string | null>(null);
  console.log(doctorId);
 





  const fetchDoctorDetail = async () => {
    try {
      setLoading(true);
      setError(null);

      // 使用相对路径，让代理配置生效
      const response = await axios({
        url: '/health/user/inquiry/v1/findDoctorInfo',
        method: 'GET',
        params: {
          doctorId: doctorId
        },
        headers: {
          // 如果有登录信息，可以从状态管理或本地存储获取
          userId: localStorage.getItem('userId') || '',
          sessionId: localStorage.getItem('sessionId') || ''
        }
      });

      // 检查响应状态
      if (response.data && response.data.status === '0000') {
        setDoctor(response.data.result);
      } else {
        setError(response.data?.message || '获取医生信息失败');
      }
    } catch (error: any) {
      console.error('获取医生详情失败:', error);
      setError(error.message || '网络请求失败，请稍后重试');
    } finally {
      setLoading(false);
    }
  };
 

  useEffect(() => {
    if (doctorId) {
      fetchDoctorDetail();
    } else {
      setError('医生ID不存在');
      setLoading(false);
    } 
  }, [doctorId]);

  const handleStartInquiry = () => {
    if (doctorId) {
      navigate(`/inquiry/new?doctorId=${doctorId}`);
    }
  };

  if (loading) {
    return (
      <div className="doctor-detail-page">
        <NavBar
          title="医生详情"
          leftText="返回"
          onClickLeft={() => navigate(-1)}
        />
        <div className="loading-container">
          <Loading type="spinner" />
          <span className="loading-text">加载中...</span>
        </div>
      </div>
    );
  }

  if (error || !doctor) {
    return (
      <div className="doctor-detail-page">
        <NavBar
          title="医生详情"
          leftText="返回"
          onClickLeft={() => navigate(-1)}
        />
        <div className="error-container">
          <Empty image="error" description={error || '未找到医生信息'} />
          <Button
            className="retry-button"
            onClick={fetchDoctorDetail}
            round
          >
            重新加载
          </Button>
        </div>
      </div>
    );
  }



  return (
    <div className="doctor-detail-page">
      <NavBar
        title="医生详情"
        leftText="返回"
        onClickLeft={() => navigate(-1)}
      />

      <div className="doctor-info">
        <div className="basic-info">
          <Image
            className="avatar"
            src={doctor.imagePic || '/default-doctor.png'}
            fit="cover"
          />
          <div className="info-content">
            <div className="name-title">
              <span className="name">{doctor.doctorName}</span>
              <Tag type="primary" className="title">{doctor.jobTitle}</Tag>
            </div>
            <div className="hospital">{doctor.inauguralHospital}</div>
            <div className="department">{doctor.departmentName}</div>
          </div>
        </div>

        <div className="stats-info">
          <div className="stat-item">
            <div className="value">{doctor.serverNum}</div>
            <div className="label">问诊量</div>
          </div>
          <div className="stat-item">
            <div className="value">{(doctor.praise * 100).toFixed(1)}%</div>
            <div className="label">好评率</div>
          </div>
          <div className="stat-item">
            <div className="value">{doctor.praiseNum}</div>
            <div className="label">好评数</div>
          </div>
        </div>

        <div className="detail-section">
          <h3 className="section-title">擅长领域</h3>
          <p className="section-content">{doctor.speciality || '暂无信息'}</p>
        </div>

        <div className="detail-section">
          <h3 className="section-title">个人简介</h3>
          <p className="section-content">{doctor.introduction || '暂无信息'}</p>
        </div>
        <div className="evaluate-section">
          <h3 className="section-title" onClick={() => navigate(`/doctor/evaluate/${doctorId}`)}>评论列表</h3> 
        </div>
      </div>

      <div className="action-bar">
        <div className="price">
          <span className="amount">￥{doctor.servicePrice}</span>
          <span className="unit">/次</span>
        </div>
        <Button
          type="primary"
          className="inquiry-button"
          onClick={handleStartInquiry}
          round
        >
          立即问诊
        </Button>
      </div>
    </div>
  );
};

export default DoctorDetail; 